<template>
	<view>
		<up-navbar :safeAreaInsetTop="true" bgColor="#fff" :placeholder="true">
			<template #left>
				<view class="text-[36rpx] font-bold">康养旅居</view>
			</template>
		</up-navbar>
		<view class="pt-[24rpx] px-[20rpx]">
			<SearchBar></SearchBar>
		</view>
		<view class="m-[20rpx] rounded-[16rpx]" style="box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(137,110,253,0.5);">
			<up-swiper :list="travelAd" height="302rpx" radius="8"></up-swiper>
		</view>
		<view class="flex px-[46rpx] py-[26rpx] justify-between">
			<view class="text-[28rpx] font-normal text-[#333333]" >综合</view>
			<view class="flex items-center">
				<view class="text-[28rpx] font-normal text-[#333333]">价格</view>
				<image src="../../static/image/sx.png" mode="" class="w-[24rpx] h-[24rpx] block ml-[6rpx]"></image>
			</view>
			<view class="flex items-center">
				<view class="text-[28rpx] font-normal text-[#333333]">房间户型</view>
				<image src="../../static/image/sx.png" mode="" class="w-[24rpx] h-[24rpx] block ml-[6rpx]"></image>
			</view>
		</view>
		<view class="px-[30rpx] grid grid-cols-2 gap-[22rpx]">
			<template v-for="(item,index) in list" :key="index">
				<sojournItem :product="item" @change="onchange"></sojournItem>
			</template>
		</view>
		<CustomTabbar :currentIndex="1" />
	</view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import sojournItem from '@/components/sojournItem.vue'
import SearchBar from '@/components/SearchBar.vue';
import env from '@/config/common.js'
import { GetSojournList, GetTravelList} from '../../API/sojourn';
const { getInfo , appTravelCategoryList ,travelAd} = useInfo()
const { list , GetList  , num } = useList()
let baseUrl = ref(env.API_BASE_URL_DEV)
const onchange = (index)=>{
	uni.navigateTo({
		url:`/subPages/sojournItem/sojournItem?id=${index}`
	})
	// console.log(index);
}
function useInfo(){
	const travelAd = ref([])
	const appTravelCategoryList = ref([])
	const getInfo = async()=>{
		try {
			let { data } = await GetSojournList()
			travelAd.value = data.travelAd.map(item=>{
				item.url = baseUrl.value + item.pic
				return item
			})
			appTravelCategoryList.value = data.appTravelCategoryList
		} catch (error) {
			console.log(error);
		}
	}
	return{
		getInfo,
		travelAd,
		appTravelCategoryList
	}
}
function useList(){
	const list = ref([])
	const num = ref(0)
	const GetList = async ()=>{
		try {
			let { rows,total } = await GetTravelList()
			list.value = rows.map(item=>{
				item.pic = baseUrl.value + item.pic
				return item
			})
			num.value = total
			console.log(list.value);
		} catch (error) {
			console.log(error);
		}
	}
	return { list , GetList , num}
}
onShow(async()=>{
	await getInfo()
	await GetList()
})
</script>

<style lang="scss" scoped>

</style>